<template>
  <div>
    <div class="cantainer">
      <router-view></router-view>
    </div>

    <van-tabbar
      v-model="active"
      @change="onChange"
      safe-area-inset-bottom
      class="tabbar"
      active-color="#3ACE8A"
    >
      <van-tabbar-item to="/index/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/index/analysis" icon="chart-trending-o"
        >统计分析</van-tabbar-item
      >
      <van-tabbar-item to="/index/core" icon="contact"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { unknown, getConfig } from "../../api/api";
import store from "../../store/index";
export default {
  name: "index",
  data() {
    return {
      active: null,
      bool: false,
      set: null,
      websock: null,
    };
  },
  methods: {
    onChange(index) {
      this.active = index;
    },
    getUnknown() {
      setTimeout(() => {
        if (store.state.bool) return;
        store.commit('isBoolFn')
        this.set = setInterval(() => {
          unknown()
            .then((res) => {
              console.log("未知接口---", res);
            })
            .catch((err) => {
              console.log("---------------", err);
              clearInterval(this.set);
            });
        }, JSON.parse(localStorage.getItem("config")).renwutime * 1000);
      }, 1000);
    },
    getConfigInfo() {
      getConfig().then((res) => {
        this.$toast.clear();
        localStorage.setItem("config", JSON.stringify(res.data[0]));
      });
    },
    // getUnknown() {
    //   const wsUrl = "ws://www.gmc8888.com/api/Crontab/add_goods";
    //   this.websock = new WebSocket(wsUrl);
    //   this.websock.onmessage = this.websocketonmessage;
    //   this.websock.onopen = this.websocketonopen;
    //   this.websock.onerror = this.websocketonerror;
    //   this.websock.onclose = this.websocketclose;
    // },
    // websocketonopen() {
    //   let actions = { test: "12345" };
    //   this.websocketsend(JSON.stringify(actions));
    // },
    // websocketonerror() {
    //   this.initWebSocket();
    //   console.log("连接建立失败重连");
    // },
    // websocketonmessage(e) {
    //   const redata = JSON.parse(e.data);
    //   console.log("数据接收---", redata);
    // },
    // websocketsend(Data) {
    //   this.websock.send(Data);
    //   console.log("数据发送---", Data);
    // },
    // websocketclose(e) {
    //   //关闭
    //   console.log("断开连接", e);
    // },
  },
  mounted() {
    // this.getUnknown();
  },
  created() {
    this.getConfigInfo();
  },
};
</script>

<style lang="less" scoped>
div {
  box-sizing: border-box !important;
}
.cantainer {
  width: 100%;
  overflow: hidden;
  .baseImg {
    width: 100%;
    height: 180px;
    background-color: #3ace8a;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
  }
  .title {
    width: 94%;
    height: 50%;
    max-height: 350px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 6%;
    left: 3%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px 5px 10px #bfc1c4;

    .text {
      img:nth-child(1) {
        width: 25%;
        position: absolute;
        top: -8%;
        left: 10%;
      }
    }

    .time {
      margin-top: 28%;
      width: 100%;
      height: 100px;
      background-color: #000;
    }

    .tiemText {
      font-size: 1em;
      font-weight: 700;
      color: #333333;
      letter-spacing: 1px;
    }

    & > img {
      //   width: 50%;
      height: 40px;
    }
  }
  .center {
    width: 45%;
    max-width: 168px;
    height: 45%;
    max-height: 168px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 57%;
    box-shadow: 0px 5px 10px #bfc1c4;
    text-align: center;

    img {
      width: 60%;
      margin-top: 50%;
      transform: translateY(-50%);
    }
  }
}
.tabbar {
  border-top: 1px solid #3ace8a;
  z-index: 5;
}
</style>